<template>
    <view class="liquid-level-container">
        <!-- 页面头部 -->
        <page-header title="液位监测"></page-header>

        <!-- 页面内容 -->
        <view class="content">
            <!-- 液位数据卡片 -->
            <view class="data-card">
                <view class="card-title">编号3-1液位数据</view>
                <view class="current-level">
                    <text class="label">当前液位</text>
                    <text class="value">5.7</text>
                    <text class="unit">cm</text>
                </view>
                <view class="info-row detection-time">
                    <view class="icon-wrapper">
                        <roc-icon-plus
                            type="fas"
                            name="clock"
                            :size="16"
                            color="#1F41DA"></roc-icon-plus>
                    </view>
                     <text class="info-text">检测时间:{{ detectionTime }}</text>
                </view>
                <view class="info-row device-status">
                    <view class="icon-wrapper">
                        <!-- <roc-icon-plus
                            type="fas"
                            name="check-circle"
                            :size="16"
                            color="#52c41a"></roc-icon-plus> -->
                        <image
                            style="width: 28rpx;height:28rpx"
                            class=""
                            src="/static/images/device.png"></image>
                    </view>
                    <text class="info-text">设备状态:在线</text>
                </view>
            </view>

            <!-- 液位变化趋势卡片 -->
            <view class="trend-card">
                <view class="card-title">液位变化趋势</view>
                <view class="chart-container">
                    <l-echart ref="chartRef"></l-echart>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import LimeEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue'
import PageHeader from '@/components/PageHeader/index.vue'

export default {
    name: 'LiquidLevel',
    components: {
        'l-echart': LimeEchart,
        'page-header': PageHeader,
    },
     setup() {
         const chartRef = ref(null)
         const myChart = ref(null)
         const detectionTime = ref('')

         // 更新检测时间函数
         const updateDetectionTime = () => {
             const now = new Date()
             const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000) // 减去24小时
             const year = yesterday.getFullYear()
             const month = String(yesterday.getMonth() + 1).padStart(2, '0')
             const day = String(yesterday.getDate()).padStart(2, '0')
             detectionTime.value = `${year}-${month}-${day} 14:30:25`
         }

         // 获取最近7天的日期（不包括今天）
         const getLast7Days = () => {
             const dates = []
             const today = new Date()
             for (let i = 7; i >= 1; i--) {
                 const date = new Date(today.getTime() - i * 24 * 60 * 60 * 1000)
                 const month = date.getMonth() + 1
                 const day = date.getDate()
                 dates.push(`${month}/${day}`)
             }
             return dates
         }

        // 液位趋势数据
        const trendData = {
            dates: getLast7Days(),
            values: [5.7, 5.2, 5.9, 5.4, 5.8, 5.3, 5.7],
        }

        const getOption = () => {
            return {
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                    formatter: function (params) {
                        return `${params[0].axisValue}<br/>液位: ${params[0].value}mm`
                    },
                },
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 15,
                    top: 20,
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: trendData.dates,
                    axisLine: {
                        lineStyle: {
                            color: '#999999',
                        },
                    },
                    axisLabel: {
                        color: '#666666',
                    },
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    // max: 80,
                    axisLine: {
                        lineStyle: {
                            color: '#999999',
                        },
                    },
                    axisLabel: {
                        color: '#666666',
                        formatter: '{value}',
                    },
                },
                series: [
                    {
                        name: '液位',
                        type: 'line',
                        smooth: true,
                        data: trendData.values,
                        itemStyle: {
                            color: '#1890ff',
                        },
                        lineStyle: {
                            color: '#1890ff',
                            width: 2,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(24, 144, 255, 0.6)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(24, 144, 255, 0.1)',
                                    },
                                ],
                            },
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                    },
                ],
            }
        }

         // 初始化图表
         onMounted(() => {
             // 初始化检测时间
             updateDetectionTime()
             
             setTimeout(async () => {
                 if (!chartRef.value) return
                 try {
                     myChart.value = await chartRef.value.init(echarts)
                     myChart.value.setOption(getOption())
                 } catch (error) {
                     console.error('图表初始化错误:', error)
                 }
             }, 300)
         })

         return {
             chartRef,
             detectionTime,
         }
    },
}
</script>

<style lang="scss">
.liquid-level-container {
    min-height: 100vh;
    background-color: #f5f5f5;

    .content {
        padding: 20rpx;

        .data-card {
            background-color: #fff;
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

            .card-title {
                font-size: 32rpx;
                font-weight: 600;
                color: #333;
                margin-bottom: 30rpx;
            }

            .current-level {
                display: flex;
                align-items: baseline;
                margin-bottom: 30rpx;

                .label {
                    font-size: 28rpx;
                    color: #666;
                    margin-right: 10rpx;
                }

                .value {
                    font-size: 60rpx;
                    font-weight: bold;
                    color: #333;
                    margin-right: 10rpx;
                }

                .unit {
                    font-size: 28rpx;
                    color: #666;
                }
            }

            .info-row {
                display: flex;
                align-items: center;
                padding: 15rpx 20rpx;
                border-radius: 8rpx;
                margin-bottom: 15rpx;

                .icon-wrapper {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 15rpx;
                }

                .info-text {
                    font-size: 26rpx;
                    color: #333;
                }

                &.detection-time {
                    background-color: #e6f7ff;

                    .info-text {
                        color: #1f41da;
                    }
                }

                &.device-status {
                    background-color: #f6ffed;

                    .info-text {
                        color: #52c41a;
                    }
                }
            }
        }

        .trend-card {
            background-color: #fff;
            border-radius: 16rpx;
            padding: 30rpx;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

            .card-title {
                font-size: 32rpx;
                font-weight: 600;
                color: #333;
                margin-bottom: 20rpx;
            }

            .chart-container {
                height: 400rpx;
                position: relative;
                width: 100%;
            }
        }
    }
}
</style>
